<template>
    <div class="drawer-modular maxbox">
        <el-drawer title="标题" :visible.sync="drawerVisible" :with-header="false" :size="size" :before-close="close"
            :modal="true" :wrapper-closable="true" v-loading="loading">
            <div class="drawer-title">{{ drawerTitle }}</div>
            <div class="drawer-content">
                <el-scrollbar wrap-class="scrollbar-wrapper">
                    <el-form ref="ruleForm" :model="item" :rules="serviceValidation" label-width="80px"
                        label-position="top">
                        <div class="titleBox">
                            <div class="title_span" />
                            <div class="title_name">基础信息</div>
                        </div>
                        <el-row :gutter="18" class="mb8">
                            <el-col :span="9">
                                <el-form-item label="地标名称" prop="name">
                                    <el-input v-model="item.name" placeholder="请输入地标名称" size="small" clearable
                                        show-word-limit />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="18" class="mb8">
                            <el-col :span="18">
                                <el-form-item label="地图定位" prop="name">
                                    <GetCoordinate ref="map" @checkPoint="checkPoint" :key="reFresh" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </el-scrollbar>
            </div>
            <div v-loading="!requestStatus" class="drawer-btn">
                <el-button @click="close()">取消</el-button>
                <el-button type="primary" @click="submit()">提交</el-button>
            </div>
        </el-drawer>
    </div>
</template>

<script>
import { cardInfoValidation } from "./inputValidation";
import GetCoordinate from '@/views/components/map/locationMap';
import { getLandmark, addLandmark, updateLandmark } from "@/api/mall/landmark";
export default {
    components: {
        GetCoordinate
    },
    props: {
        // 窗口宽度
        size: {
            type: String,
            default: "calc(100vw - 200px)",
        },
    },
    dicts: [], // 字典
    data() {
        return {
            loading: false, // 加载
            serviceValidation: cardInfoValidation, // 表单校验
            drawerVisible: false, // 窗口显示状态
            drawerTitle: "", // 窗口标题
            item: {
                id: null,
                name: null,
                lat: null,
                lng: null,
                address: null,
                delFlag: null,
                createBy: null,
                createTime: null,
                updateBy: null,
                updateTime: null
            },
            requestStatus: true, // 提交状态
            disabled: true,
            point: {},
            reFresh: 0
        };
    },

    created() { },

    methods: {
        /** 新增-显示 */
        iShow(row) {
            this.drawerVisible = true;
            if (row) {
                this.loading = true;
                this.getInfo(row.id);
                this.drawerTitle = "修改地标";
            } else {
                this.drawerTitle = "添加地标";
            }
        },

        checkPoint(res) {
            console.log("地址", res)
            this.item = {
                ...this.item,
                ...res.point
            }
            this.item = {
                ...this.item,
                ...res.addressComponents
            }
            // this.item.city = res.addressComponents.city
            // this.item.county = res.addressComponents.district
            this.item.address = res.address
        },

        /**
         * 获取详情
         * @param {*} id 
         */
        getInfo(id) {
            getLandmark(id).then(response => {
                this.item = response.data;
                if (this.item.lat && this.item.lng) {
                    this.reFresh++
                    this.$nextTick(() => {
                        this.$refs.map.updatePoint({
                            lat: this.item.lat,
                            lng: this.item.lng
                        })
                    })
                }
                this.loading = false;
            });
        },

        /** 新增/修改 */
        submit() {
            let point = this.$refs.map.pointInfo;
            this.item.lat = point.location.lat;
            this.item.lng = point.location.lng;
            this.item.address = point.address;
            if (this.requestStatus) {
                this.requestStatus = false;
                if (!this.item.id) {
                    this.request(addLandmark, "新增");
                } else {
                    this.request(updateLandmark, "修改");
                }
            }
        },

        /** 提交请求 */
        request(mothod, str) {
            console.log("提交的数据", this.item);
            if (!mothod) return false;
            this.$refs["ruleForm"].validate((valid) => {
                if (valid) {
                    mothod(this.item)
                        .then((res) => {
                            this.requestStatus = true;
                            if (res.code == 200) {
                                this.$message.success(`${str}成功！`);
                                this.$emit("init");
                                this.close();
                            }
                        })
                        .catch((error) => {
                            this.requestStatus = true;
                        });
                } else {
                    this.requestStatus = true;
                }
            });
        },

        /** 自动定位到表单报错项 */
        moveToErr() {
            this.$nextTick(() => {
                const isError = document.getElementsByClassName("is-error");
                if (isError.length) {
                    isError[0].scrollIntoView({
                        block: "nearest",
                        behavior: "smooth",
                    });
                }
            });
        },

        /** 关闭抽屉触发 */
        close() {
            console.log("关闭抽屉");
            this.drawerVisible = false;
            this.disabled = true;
            this.$refs["ruleForm"].resetFields();
            this.emptyData();
        },

        /** 清空数据源 */
        emptyData() {
            this.item = {
                id: undefined,
                name: undefined,
                lat: undefined,
                lng: undefined,
                address: undefined,
                delFlag: undefined,
                createBy: undefined,
                createTime: undefined,
                updateBy: undefined,
                updateTime: undefined
            };
        },
    },
};
</script>

<style lang="scss" scoped>
@import "@/assets/styles/drawerModules.scss";

.titleBox {
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    .title_span {
        width: 5px;
        height: 18px;
        margin-right: 10px;
        background-color: #4979ff;
    }

    .title_name {
        font-size: 18px;
        font-weight: bold;
    }
}

.guige {
    margin-top: 10px;
    border-radius: 4px;
}
</style>